<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布招聘</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            max-width: 750px;
            margin: 0 auto;
            background-color: #f5f5f5;
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body class="min-h-screen flex flex-col pb-16">
    <!-- 顶部导航 -->
    <header class="bg-white py-4 px-4 shadow-sm sticky top-0 z-10">
        <div class="flex items-center">
            <button class="text-gray-600 mr-4">
                <i class="fas fa-chevron-left text-lg"></i>
            </button>
            <h1 class="text-xl font-semibold text-gray-800">发布招聘</h1>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="flex-1 px-4 py-6">
        <!-- 招聘类型选择区 -->
        <div class="mb-8">
            <h2 class="text-lg font-medium text-gray-700 mb-4">选择招聘类型</h2>
            <div class="grid grid-cols-1 gap-4">
                <!-- 全职招聘卡片 -->
                <div class="bg-white rounded-lg p-4 shadow-sm card-hover">
                    <div class="flex items-start">
                        <div class="bg-blue-100 p-3 rounded-full mr-4">
                            <i class="fas fa-briefcase text-blue-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-medium text-gray-800 mb-1">全职招聘</h3>
                            <p class="text-sm text-gray-500">发布长期稳定的工作岗位，适合企业核心岗位招聘</p>
                        </div>
                    </div>
                </div>

                <!-- 兼职招聘卡片 -->
                <div class="bg-white rounded-lg p-4 shadow-sm card-hover">
                    <div class="flex items-start">
                        <div class="bg-purple-100 p-3 rounded-full mr-4">
                            <i class="fas fa-clock text-purple-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-medium text-gray-800 mb-1">兼职招聘</h3>
                            <p class="text-sm text-gray-500">发布灵活用工岗位，适合短期或非全职工作需求</p>
                        </div>
                    </div>
                </div>

                <!-- 临时用工卡片 -->
                <div class="bg-white rounded-lg p-4 shadow-sm card-hover">
                    <div class="flex items-start">
                        <div class="bg-green-100 p-3 rounded-full mr-4">
                            <i class="fas fa-calendar-day text-green-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-medium text-gray-800 mb-1">临时用工</h3>
                            <p class="text-sm text-gray-500">发布临时性或项目制工作岗位，适合短期用工需求</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 操作指引区 -->
        <div class="bg-white rounded-lg p-4 shadow-sm mb-6">
            <h2 class="text-lg font-medium text-gray-700 mb-3">发布流程</h2>
            <div class="space-y-3">
                <div class="flex items-start">
                    <div class="bg-gray-100 text-gray-600 rounded-full w-6 h-6 flex items-center justify-center text-sm font-medium mr-3 mt-1">1</div>
                    <p class="text-sm text-gray-600 flex-1">填写职位基本信息，包括职位名称、工作地点等</p>
                </div>
                <div class="flex items-start">
                    <div class="bg-gray-100 text-gray-600 rounded-full w-6 h-6 flex items-center justify-center text-sm font-medium mr-3 mt-1">2</div>
                    <p class="text-sm text-gray-600 flex-1">设置职位要求，如学历、经验、技能等</p>
                </div>
                <div class="flex items-start">
                    <div class="bg-gray-100 text-gray-600 rounded-full w-6 h-6 flex items-center justify-center text-sm font-medium mr-3 mt-1">3</div>
                    <p class="text-sm text-gray-600 flex-1">填写薪资范围和福利待遇</p>
                </div>
                <div class="flex items-start">
                    <div class="bg-gray-100 text-gray-600 rounded-full w-6 h-6 flex items-center justify-center text-sm font-medium mr-3 mt-1">4</div>
                    <p class="text-sm text-gray-600 flex-1">确认信息并提交审核</p>
                </div>
            </div>
        </div>
    </main>

    <!-- 底部按钮 -->
    <div class="px-4 py-3 bg-white shadow-md">
        <a href="job-publish-step1.html" class="block w-full bg-red-500 hover:bg-red-600 text-white py-3 rounded-lg font-medium transition-colors text-center">
            开始发布
        </a>
    </div>

    <!-- 底部导航 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-lg" style="max-width: 750px; margin: 0 auto;">
        <div class="flex justify-around py-2">
            <a href="employer-homepage.html" class="flex flex-col items-center px-2 py-2 text-gray-500 hover:text-gray-700 transition-colors duration-200">
                <i class="fas fa-home text-xl"></i>
                <span class="text-xs mt-1">首页</span>
            </a>
            <a href="employer-aunt-management.html" class="flex flex-col items-center px-2 py-2 text-gray-500 hover:text-gray-700 transition-colors duration-200">
                <i class="fas fa-user-friends text-xl"></i>
                <span class="text-xs mt-1">阿姨</span>
            </a>
            <a href="employer-job-management.html" class="flex flex-col items-center px-2 py-2 text-indigo-600 relative">
                <i class="fas fa-briefcase text-xl"></i>
                <span class="text-xs mt-1">招聘</span>
                <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-6 h-0.5 bg-indigo-600 rounded-full"></div>
            </a>
            <a href="employer-my-page.html" class="flex flex-col items-center px-2 py-2 text-gray-500 hover:text-gray-700 transition-colors duration-200">
                <i class="fas fa-user text-xl"></i>
                <span class="text-xs mt-1">我的</span>
            </a>
        </div>
    </div>

    <!-- <footer class="text-center text-xs text-gray-500 py-4">
        <p>created by <a href="https://space.coze.cn" class="text-blue-500">coze space</a></p>
        <p>页面内容均由 AI 生成，仅供参考</p>
    </footer> -->
    
    <script src="navigation.js"></script>
</body>
</html>